<template>
  <div class="all">
    <div class="name_bar">{{username}}</div>
<!--    <div class="phone_bar">{{userphone}}</div>-->
    <div class="subject_name">考核模式</div>
    <div class="exit_Train" @click="goBack">退出</div>
  </div>
</template>

<script>
  export default {
    name:'ExamineTopBar',
    data(){
      return{

      }
    },
    computed:{
      username(){
        // return this.$store.state.response.Name
        let data =  JSON.parse(localStorage.getItem('familiar_with_qujingmap_userinfo'))
        // console.log('用户数据：',data.Name)
        return data.user_name
      }
    },
    methods:{
      goBack(){
        // this.$router.go(-1)
        this.$store.commit('setexit_sure_status',true)
      }
    }
  }
</script>

<style scoped>
  .all{
    width: 100%;
    height: 100%;
    //background-color: #3e6388;
    background: linear-gradient(to right,#1c1c1c,#a9a9a9);
    color: white;
    float: left;
    box-sizing: border-box;
    border: 1px solid black;
    box-shadow: 1px 1px 2px 2px black inset;
  }
  .name_bar{
    width: 5vw;
    height: 100%;
    //background-color: red;
    text-align: center;
    line-height: 5vh;
    float: left;
    font-size: 0.5vw;
  }
  .phone_bar{
    width: 10vw;
    height: 100%;
    //background-color: #0c6767;
    text-align: center;
    line-height: 5vh;
    float: left;
  }
  .subject_name{
    width: 15vw;
    height: 100%;
    //background-color: #c1945f;
    float: left;
    margin-left: calc(46% - 7.5vw);
    text-align: center;
    line-height: 5vh;
    font-size: 30px;
  }
  .exit_Train{
    width: 5vw;
    height: 80%;
    //background-color: darkseagreen;
    float: right;
    margin-top: 0.4vh;
    box-sizing: border-box;
     font-size: 0.5vw;
    //border: solid black 1px;
    //margin-right: 0.7vw;
    text-align: center;
    line-height: 3.5vh;
  }
  .exit_Train:hover{
    color: red;
    //box-shadow: 2px 2px 2px 2px red inset;
    cursor: pointer;
    border-radius: 5px;
    border: dashed red 1px;
    font-weight: bolder;
    //background: linear-gradient(to right, #44dd11, #78bc14);
  }
  .exit_Train:active{
    color: greenyellow;
    //box-shadow: 2px 2px 2px 2px greenyellow inset;
  }
</style>